import React, { useState } from 'react'
import Card from '../UI/Card/Card'
import './LogForm.css'
import { v4 as uuidv4 } from 'uuid';
function LogsForm({addLogsData}) {
    const [date, setDate] = useState('')
    const [desc, setDesc] = useState('')
    const [time, setTime] = useState('')
    const submitHandler = (e) => {

        e.preventDefault();//取消表单默认提交行为
        const data = {
            id: uuidv4(),
            date:new Date(date),
            desc,
            time:+time

        }
        addLogsData(data)
       setDate('')
       setDesc('')
       setTime('')

    }

    return (
        <>
            <Card className='logs-form'>
                <form onSubmit={submitHandler}>
                    <div className='form-item'>
                        <label htmlFor="date">日期</label>
                        <input value={date} type="date" id='date' onChange={(e) => { setDate(e.target.value) }} />
                    </div>
                    <div className='form-item'>
                        <label htmlFor="desc">描述</label>
                        <input value={desc} type="text" id='desc' onChange={(e) => { setDesc(e.target.value) }} />
                    </div>
                    <div className='form-item'>
                        <label htmlFor="time">时长</label>
                        <input value={time} type="number" id='time' onChange={(e) => { setTime(e.target.value) }} />
                    </div>
                    <div className='form-btn'>
                        <button type='submit' >添加</button>

                    </div>
                </form>

            </Card>
        </>
    )
}



export default LogsForm

